<template>
  <div class="body-wrapper">

    <!--    查询部分 -->
    <div class="search-box">
      <el-form :inline="true" class="demo-form-inline" size="mini">
        <el-form-item label="角色名称">
          <el-input v-model="searchForm.roleName" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-date-picker
            v-model="value2"
            size="mini"
            type="datetimerange"
            :picker-options="pickerOptions"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            @change="chooseTime"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="left">
        </el-date-picker>

        <el-form-item style="margin-left: 10px">
          <el-button type="primary" @click="searchPage">查询</el-button>
          <el-button type="warning" @click="resetSearchForm">重置</el-button>
        </el-form-item>
      </el-form>

    </div>
    <!--    操作部分 -->
    <div class="exec-box">
      <el-button v-has-perm="['sys:role:add']" size="mini" type="success" icon="el-icon-share"
                 @click="editDialog=true,formData={}">新建
      </el-button>
      <el-button size="mini" type="warning" icon="el-icon-edit" @click="findById(ids[0]),editDialog=true"
                 v-has-perm="['sys:role:update']" :disabled="ids.length!=1">修改
      </el-button>
      <el-button v-has-perm="['sys:role:delete']" size="mini" type="danger" icon="el-icon-delete" @click="doBatchDelete"
                 :disabled="ids.length==0">删除
      </el-button>
    </div>

    <!--    列表部分 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-table
            :data="tableData"
            row-key="id"
            stripe
            ref="table"
            @selection-change="selectChange"
            @row-click="tableRowClick"
            style="width: 100%">
          <el-table-column
              type="selection"
              align="center"
              width="55">
          </el-table-column>
          <el-table-column
              prop="id"
              label="角色id"
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="roleName"
              align="center"
              label="角色名称"
          >

          </el-table-column>
          <el-table-column
              prop="roleDesc"
              align="center"
              label="角色描述"
          >
          </el-table-column>
          <el-table-column
              prop="address"
              align="center">
            <template v-slot="obj">
              <el-button size="mini" type="primary" icon="el-icon-edit" style="margin-right: 10px"
                         v-has-perm="['sys:role:update']"
                         @click.stop="findById(obj.row.id),editDialog=true"></el-button>

              <el-popconfirm
                  v-has-perm="['sys:role:delete']"
                  confirm-button-text='好的'
                  cancel-button-text='不用了'
                  @confirm="batchDelete"
                  @cancel="batchDeleteCancel"
                  icon="el-icon-info"
                  icon-color="red"
                  title="这是一段内容确定删除吗？"
              >
                <el-button size="mini" type="danger" slot="reference" icon="el-icon-delete"
                           @click.stop="itemBtnClick(obj.row)"></el-button>
              </el-popconfirm>


            </template>
          </el-table-column>
        </el-table>
        <!--    分页部分-->
        <div class="page-box">
          <el-pagination
              background
              :current-page="searchForm.currentPage"
              :page-size="searchForm.pageSize"
              @current-change="pageChangeHandler"
              layout="prev, pager, next"
              :total="total">
          </el-pagination>
        </div>
      </el-col>

      <el-col :span="12" v-has-perm="['sys:role:grant']">
        <el-card class="box-card" style="width: 90%" shadow="never">
          <div slot="header" class="clearfix">
            <span style="font-size: 18px;font-weight: 700;">分配权限</span>
            <el-button v-has-perm="['sys:role:update']" v-if="id!=0" @click="setRoleMenu"
                       style="float: right; padding: 3px 0" type="text">确定
            </el-button>
          </div>
          <el-scrollbar>
            <el-tree
                :data="menuTreeList"
                show-checkbox
                node-key="id"
                ref="tree"
                :props="defaultProps">
            </el-tree>
          </el-scrollbar>


        </el-card>
      </el-col>
    </el-row>


    <!--    弹框-->

    <el-dialog title="操作实体" :visible.sync="editDialog" width="32%">
      <!---->
      <el-form ref="form" :model="formData" :rules="formRules" label-width="80px" size="small">
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="formData.roleName"></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="formData.roleDesc"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false" size="mini">取 消</el-button>
        <el-button type="primary" size="mini" @click="addOrEdit">确 定</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script src="./index.js">
</script>

<style src="./index.scss" scoped lang="scss">

</style>
